<template>
  <div class="btns">
    <el-button
        v-for="i in btnsArr"
        :key="i.path"
        type="primary"
        @click="goPage(i.path)">
      {{i.name}}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
const router = useRouter()
interface BtnType {
  readonly name ?: string
  readonly path ?: string
  [propName: string]: any;
}
const btnsArr = <BtnType[]>[
    {name:'game',path:'/game'},
    {name:'table',path:'/table'},
    {name:'scrollNum',path:'/scrollNum'},
    {name:'drag2Scale',path:'/drag2Scale'},
    {name:'raffle',path:'/raffle'},
    {name:'snow',path:'/snow'},
    {name:'iKun',path:'/iKun'},
    {name:'textChoose',path:'/textChoose'},
    {name:'lightCard',path:'/lightCard'},
    {name:'roundScroll',path:'/roundScroll'},
    {name:'card3D',path:'/card3D'},
    {name:'bigScreen',path:'/bigScreen'},
    {name:'fileReader',path:'/fileReader'},
    {name:'aiEditor',path:'/aiEditor'},
    {name:'wangEditor',path:'/wangEditor'},
    {name:'tinymce',path:'/tinymce'},
    {name:'xmind',path:'/xmind'},
    {name:'dhtmlxGantt',path:'/dhtmlxGantt'},
    {name:'canvas',path:'/canvas'},
    {name:'DrawingCanvas',path:'/DrawingCanvas'},
    {name:'ScriptEditor',path:'/ScriptEditor'},
    {name:'videoPlayer',path:'/videoPlayer'},
    {name:'canvasDraw',path:'/canvasDraw'},
  ]
const goPage = (path:string) => {
  router.push(path)
}
</script>

<style scoped>
  .btns {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
